<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Routes | Framework7 Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Routes | Framework7 Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App HTML Layout</a></li>
                <li><a href="rtl-layout.html">RTL Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Events</div>
              <ul>
                <li><a href="events.html">Events</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Router / Navigation</div>
              <ul>
                <li><a href="routes.html">Routes</a></li>
                <li><a href="router-component.html">Router Component</a></li>
                <li><a href="view.html#router-api-methods-properties">Router API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Components</div>
              <ul>
                <li><a href="app.html">App / Core</a></li>
                <li><a href="accordion.html">Accordion / Collapsible</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="autocomplete.html">Autocomplete</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="calendar.html">Calendar / Datepicker</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="data-table.html">Data Table</a></li>
                <li><a href="dialog.html">Dialog</a></li>
                <li><a href="elevation.html">Elevation</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="form.html">Form Data / Storage</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icons.html">Icons</a></li>
                <li><a href="infinite-scroll.html">Infinite Scroll</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="lazy-load.html">Lazy Load</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="notification.html">Notification</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="picker.html">Picker</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="pull-to-refresh.html">Pull to Refresh</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable-list.html">Sortable List</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="timeline.html">Timeline</a></li>
                <li><a href="toast.html">Toast</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="tooltip.html">Tooltip</a></li>
                <li><a href="vi.html">Video Intelligence (vi)</a></li>
                <li><a href="view.html">View / Router</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Framework7 Icons</div>
              <ul>
                <li><a href="/icons/">Framework7 Icons Cheatsheet</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Styling</div>
              <ul>
                <li><a href="iphone-x.html">iPhone X</a></li>
                <li><a href="color-themes.html">Color Themes</a></li>
                <li><a href="typography.html">Typography</a></li>
                <li><a href="hairlines.html">Hairlines</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Dom7</div>
              <ul>
                <li><a href="dom7.html">Dom7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Template7</div>
              <ul>
                <li><a href="template7.html">Template7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Fast Clicks</div>
              <ul>
                <li><a href="fast-clicks.html">Fast Clicks</a></li>
                <li><a href="active-state.html">Active State</a></li>
                <li><a href="tap-hold.html">Tap Hold Event (Long Tap)</a></li>
                <li><a href="touch-ripple.html">Touch Ripple (MD Theme)</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Utilities</div>
              <ul>
                <li><a href="request.html">Request / Ajax</a></li>
                <li><a href="utils.html">Utils</a></li>
                <li><a href="device.html">Device</a></li>
                <li><a href="support.html">Support</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Plugins API</div>
              <ul>
                <li><a href="plugins-api.html">Plugins API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Lazy Modules</div>
              <ul>
                <li><a href="lazy-modules.html">Lazy Modules</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Custom Build</div>
              <ul>
                <li><a href="custom-build.html">Custom Build</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Routes</h1>
          <ul class="docs-index"></ul>
          <h2>Define Routes</h2>
          <p>First of all, when we init the Framework7 app we should pass default routes using <code>routes</code> array parameter:</p><pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  routes<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      name<span class="token punctuation">:</span> <span class="token string">'about'</span><span class="token punctuation">,</span>
      path<span class="token punctuation">:</span> <span class="token string">'/about/'</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">'./pages/about.html'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      name<span class="token punctuation">:</span> <span class="token string">'news'</span><span class="token punctuation">,</span>
      path<span class="token punctuation">:</span> <span class="token string">'/news/'</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">'./pages/news.html'</span><span class="token punctuation">,</span>
      options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        animate<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      name<span class="token punctuation">:</span> <span class="token string">'users'</span><span class="token punctuation">,</span>
      path<span class="token punctuation">:</span> <span class="token string">'/users/'</span><span class="token punctuation">,</span>
      templateUrl<span class="token punctuation">:</span> <span class="token string">'./pages/users.html'</span><span class="token punctuation">,</span>
      options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        context<span class="token punctuation">:</span> <span class="token punctuation">{</span>
          users<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'John Doe'</span><span class="token punctuation">,</span> <span class="token string">'Vladimir Kharlampidi'</span><span class="token punctuation">,</span> <span class="token string">'Timo Ernst'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      on<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">pageAfterIn</span><span class="token punctuation">:</span> <span class="token keyword">function</span> test <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> page</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token comment">// do something after page gets into the view</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">pageInit</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> page</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token comment">// do something when page initialized</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// Default route, match to all pages (e.g. 404 page)</span>
    <span class="token punctuation">{</span>
      path<span class="token punctuation">:</span> <span class="token string">'(.*)'</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">'./pages/404.html'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <p>Routes defined on app init are default routes, they will be available for any View/Router in the app.</p>
          <p>If you have a multi-view/router app and you want to have some View/Router to have <b>own strict routes</b> and don't want default routes be available in this <a href="view.html">View</a>, then you may specify the same <code>routes</code> parameter on View init:</p><pre><code class="js"><span class="token keyword">var</span> view1 <span class="token operator">=</span> app<span class="token punctuation">.</span>views<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token string">'.view-1'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  routes<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      path<span class="token punctuation">:</span> <span class="token string">'/users/'</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">'./pages/users.html'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      path<span class="token punctuation">:</span> <span class="token string">'/user/'</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">'./pages/user.html'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <p>If you have a multi-view/router app and you want to have some View/Router to have <b>additional routes</b> and don't want these additional routes are available in other Views, then you may specify the <code>routesAdd</code> parameter on View init:</p><pre><code class="js"><span class="token comment">// This view will support all global routes + own additional routes</span>
<span class="token keyword">var</span> view2 <span class="token operator">=</span> app<span class="token punctuation">.</span>views<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token string">'.view-2'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token comment">// These routes are only available in this view</span>
  routesAdd<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      path<span class="token punctuation">:</span> <span class="token string">'/blog/'</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">'./pages/blog.html'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      path<span class="token punctuation">:</span> <span class="token string">'/post/'</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">'./pages/post.html'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
          <h2>Route Properties</h2>
          <p>Ok, now we will see what each route property means:</p>
          <table class="params-table">
            <thead>
              <tr>
                <th>Parameter</th>
                <th>Type</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>name</td>
                <td>string</td>
                <td>Route name, e.g. <code>home</code></td>
              </tr>
              <tr>
                <td>path</td>
                <td>string</td>
                <td>Route path. Means this route will be loaded when we click link that match to this path, or can be loaded by this path using API</td>
              </tr>
              <tr>
                <td>options</td>
                <td>object</td>
                <td>Object with additional route options (optional)</td>
              </tr>
              <tr>
                <td>routes</td>
                <td>array</td>
                <td>Array with nested routes</td>
              </tr>
              <tr>
                <th colspan="4">Lazy Modules</th>
              </tr>
              <tr>
                <td>modules</td>
                <td>array</td>
                <td>Array with <a href="./lazy-modules.html">Lazy Modules</a> to load before route loading</td>
              </tr>
              <tr>
                <th colspan="4">Content Related Properties<br><small>The following route properties define how (from where/what) content should be loaded</small></th>
              </tr>
              <tr>
                <td>el</td>
                <td>HTMLElement</td>
                <td>Load page from DOM by passed HTMLElement. Can be used only with enabled <code>stackPages</code> on View.</td>
              </tr>
              <tr>
                <td>pageName</td>
                <td>string</td>
                <td>Load page from DOM that has same data-name attribute. Can be used only with enabled <code>stackPages</code> on View.</td>
              </tr>
              <tr>
                <td>content</td>
                <td>string</td>
                <td>Creates dynamic page from specified content string</td>
              </tr>
              <tr>
                <td>url</td>
                <td>string</td>
                <td>Load page content via Ajax.
                  <p>Also supports dynamic route params from <a href="#route-path">route path</a> using <code>{{paramName}}</code> expression, e.g.</p><pre><code class="js"><span class="token punctuation">{</span>
  path<span class="token punctuation">:</span> <span class="token string">'/users/:userId/posts/:postId'</span><span class="token punctuation">,</span>
  url<span class="token punctuation">:</span> <span class="token string">'http://myapp.com/posts/{{userId}}/{{postId}}'</span>
<span class="token punctuation">}</span></pre></code>
                </td>
              </tr>
              <tr>
                <td>template</td>
                <td>string<br>function</td>
                <td>Load page content from passed Template7 template string or function</td>
              </tr>
              <tr>
                <td>templateUrl</td>
                <td>string</td>
                <td>Load page content from url via Ajax, and compile it using Template7
                  <p>Also supports dynamic route params from <a href="#route-path">route path</a> using <code>{{paramName}}</code> expression</p>
                </td>
              </tr>
              <tr>
                <td>component</td>
                <td>object</td>
                <td>Load page from passed Framework7 <a href="router-component.html">Router Component</a></td>
              </tr>
              <tr>
                <td>componentUrl</td>
                <td>string</td>
                <td>load pages as a component via Ajax
                  <p>Also supports dynamic route params from <a href="#route-path">route path</a> using <code>{{paramName}}</code> expression</p>
                </td>
              </tr>
              <tr>
                <td>async</td>
                <td>function(routeTo, routeFrom, resolve, reject)</td>
                <td>Do required asynchronous manipulation and the return required route content and options</td>
              </tr>
              <tr>
                <th colspan="4">Routable Tabs</th>
              </tr>
              <tr>
                <td>tabs</td>
                <td>array</td>
                <td>Array with tab routes</td>
              </tr>
              <tr>
                <th colspan="4">Routable Modals</th>
              </tr>
              <tr>
                <td>actions</td>
                <td>object</td>
                <td>Action Sheet route</td>
              </tr>
              <tr>
                <td>popup</td>
                <td>object</td>
                <td>Popup route</td>
              </tr>
              <tr>
                <td>loginScreen</td>
                <td>object</td>
                <td>Login screen route</td>
              </tr>
              <tr>
                <td>popover</td>
                <td>object</td>
                <td>Popover route</td>
              </tr>
              <tr>
                <td>sheet</td>
                <td>object</td>
                <td>Sheet route</td>
              </tr>
              <tr>
                <th colspan="4">Routable Panels</th>
              </tr>
              <tr>
                <td>panel</td>
                <td>object</td>
                <td>Panel route</td>
              </tr>
              <tr>
                <th colspan="4">Events</th>
              </tr>
              <tr>
                <td>on</td>
                <td>object</td>
                <td>Object with event handlers</td>
              </tr>
              <tr>
                <th colspan="4">Alias & Redirect</th>
              </tr>
              <tr>
                <td>alias</td>
                <td>string<br>array</td>
                <td>Route alias, or array with route aliases. We need to specify here alias <b>path</b></td>
              </tr>
              <tr>
                <td>redirect</td>
                <td>string<br>function(route, resolve, reject)</td>
                <td>Route redirect. We need to specify here redirect <b>url</b> (not path)</td>
              </tr>
              <tr>
                <th colspan="4">Before Enter/Leave</th>
              </tr>
              <tr>
                <td>beforeEnter</td>
                <td>function(routeTo, routeFrom, resolve, reject)<br><br>array</td>
                <td>Function (or array of functions) that will be executed before route load/enter. To proceed route loading <code>resolve</code> must be called. In case of <code>array</code> then every function in array must be resolved to proceed.</td>
              </tr>
              <tr>
                <td>beforeLeave</td>
                <td>function(routeTo, routeFrom, resolve, reject)<br><br>array</td>
                <td>Function (or array of functions) that will be executed before route unload/leave. To proceed navigation <code>resolve</code> must be called. In case of <code>array</code> then every function in array must be resolved to proceed.</td>
              </tr>
              <tr>
                <th colspan="4">keepAlive</th>
              </tr>
              <tr>
                <td>keepAlive</td>
                <td>boolean</td>
                <td>Enables so called <code>keepAlive</code> route. When enabled then once loaded page and its component (Vue, React or Router component) will be never destroyed. Instead, it will be detached from DOM and reused again when required.</td>
              </tr>
            </tbody>
          </table>
          <p>Here is an example for most of the possible options:</p><pre><code class="js">routes<span class="token punctuation">:</span> <span class="token punctuation">[</span>
  <span class="token comment">// Load via Ajax</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/about/'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'./pages/about.html'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// Dynamic page from content</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/news/'</span><span class="token punctuation">,</span>
    content<span class="token punctuation">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
      &lt;div class="page">
        &lt;div class="page-content">
          &lt;div class="block">
            &lt;p>This page created dynamically&lt;/p>
          &lt;/div>
        &lt;/div>
      &lt;/div>
    </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// By page name (data-name="services") presented in DOM</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/services/'</span><span class="token punctuation">,</span>
    pageName<span class="token punctuation">:</span> <span class="token string">'services'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// By page HTMLElement</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/contacts/'</span><span class="token punctuation">,</span>
    el<span class="token punctuation">:</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.page[data-name="contacts"]'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// By template</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/template/:name/'</span><span class="token punctuation">,</span>
    template<span class="token punctuation">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
      &lt;div class="page">
        &lt;div class="page-content">
          &lt;div class="block">
            &lt;p>Hello {{$route.params.name}}&lt;/p>
          &lt;/div>
        &lt;/div>
      &lt;/div>
    </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// By template URL</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/blog/'</span><span class="token punctuation">,</span>
    templateUrl<span class="token punctuation">:</span> <span class="token string">'./pages/blog.html'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// By component</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/posts/'</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token comment">// look below</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// By component url</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/post/:id/'</span><span class="token punctuation">,</span>
    componentUrl<span class="token punctuation">:</span> <span class="token string">'./pages/component.html'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// Async</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/something/'</span><span class="token punctuation">,</span>
    <span class="token function-variable function">async</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">routeTo<span class="token punctuation">,</span> routeFrom<span class="token punctuation">,</span> resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// Requested route</span>
      <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>routeTo<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token comment">// Get external data and return template7 template</span>
      app<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token string">'http://some-endpoint/'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">resolve</span><span class="token punctuation">(</span>
          <span class="token comment">// How and what to load: template</span>
          <span class="token punctuation">{</span>
            template<span class="token punctuation">:</span> <span class="token string">'&lt;div class="page">{{users}}&lt;/div>'</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token comment">// Custom template context</span>
          <span class="token punctuation">{</span>
            context<span class="token punctuation">:</span> <span class="token punctuation">{</span>
              users<span class="token punctuation">:</span> data<span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span></pre></code>
          <h2>Route Path</h2>
          <p>As stated above, the route's <code>path</code> property means the path/url that will be displayed in browser window address bar (if <code>pushState</code> enabled) when the following route will be loaded either by api or clicking on a link with same path.</p>
          <p>There is also support for dynamic paths. So if you have the following path in your route <code>/blog/users/:userId/posts/:postId/</code> and click the link with the with the <code>/blog/users/12/posts/25</code> href then on loaded page we access <code>route.params</code> object containing <code>{ userId: 12, postId: 25 }</code></p>
          <p>Route path matching is handled by <a href="https://github.com/pillarjs/path-to-regexp" target="_blank">Path To Regexp</a> library, so everything what is supported there is supported in Framework7 as well. For example, if you want to add default route which match all paths, we can use regular expression like:</p><pre><code class="js"><span class="token comment">// Default route, match to all pages (e.g. 404 page)</span>
<span class="token punctuation">{</span>
  path<span class="token punctuation">:</span> <span class="token string">'(.*)'</span><span class="token punctuation">,</span>
  url<span class="token punctuation">:</span> <span class="token string">'./pages/404.html'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</pre></code>
          <h2>Route Options</h2>
          <p>Lets look at additional route options that can be passed in <code>options</code> property:</p>
          <table class="params-table">
            <thead>
              <tr>
                <th>Parameter</th>
                <th>Type</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody></tbody>
            <tr>
              <td>animate</td>
              <td>boolean</td>
              <td>whether the page should be animated or not (overwrites default router settings)</td>
            </tr>
            <tr>
              <td>history</td>
              <td>boolean</td>
              <td>whether the page should be saved in router history</td>
            </tr>
            <tr>
              <td>pushState</td>
              <td>boolean</td>
              <td>whether the page should be saved in browser state. In case you are using <code>pushState</code>, then you can pass here <code>false</code> to prevent route getting in browser history</td>
            </tr>
            <tr>
              <td>reloadCurrent</td>
              <td>boolean</td>
              <td>replace the current page with the new one from route</td>
            </tr>
            <tr>
              <td>reloadPrevious</td>
              <td>boolean</td>
              <td>replace the previous page in history with the new one from route</td>
            </tr>
            <tr>
              <td>reloadAll</td>
              <td>boolean</td>
              <td>load new page and remove all previous pages from history and DOM</td>
            </tr>
            <tr>
              <td>context</td>
              <td>object</td>
              <td>custom/extended context for Template7/Component page (when route loaded from <code>template</code>, <code>templateUrl</code>, <code>component</code> or <code>componentUrl</code>)</td>
            </tr>
            <tr>
              <td>props</td>
              <td>object</td>
              <td>props that will be passed as Vue/React page component props</td>
            </tr>
          </table>
          <h2>Async Route</h2>
          <p><code>async</code> route property is very powerful tool designed to return dynamic route properties. It is a function with the following arguments:</p>
          <div class="method-wrap">
            <p class="method">async(<span>routeTo, routeFrom, resolve, reject</span>)</p>
            <ul class="method-parameters">
              <li><span class="parameter">routeTo</span> - requested Route</li>
              <li><span class="parameter">routeFrom</span> - currently active Route</li>
              <li><span class="parameter">resolve</span> - callback function that you need to call to proceed route loading</li>
              <li><span class="parameter">reject</span> - callback function that you need to call to abort route loading</li>
            </ul>
          </div>
          <div class="method-wrap">
            <p><code>resolve</code> callback function accepts two arguments:</p>
            <p class="method">resolve(<span>parameters, options</span>)</p>
            <ul class="method-parameters">
              <li><span class="parameter">parameters</span> <span class="parameter-type">object</span> - object with resolved route content. Must contain one of <code>url</code>, <code>content</code>, <code>template</code>, <code>templateUrl</code>, <code>component</code> or <code>componentUrl</code> properties</li>
              <li><span class="parameter">options</span> <span class="parameter-type">object</span> - object with <a href="#route-options">Route Options</a></li>
            </ul>
          </div>
          <div class="method-wrap">
            <p><code>reject</code> callback function doesn't have arguments:</p>
            <p class="method">reject()</p>
          </div>
          <div class="important-note">
            <p><b>Note that until you call <code>resolve</code> or <code>reject</code> in async method, routing will be blocked!</b></p>
          </div>
          <p>For example:</p><pre><code class="js">routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/foo/'</span><span class="token punctuation">,</span>
    <span class="token function">async</span><span class="token punctuation">(</span>routeTo<span class="token punctuation">,</span> routeFrom<span class="token punctuation">,</span> resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword-block">if</span> <span class="token punctuation">(</span>userIsLoggedIn<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span> url<span class="token punctuation">:</span> <span class="token string">'secured.html'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span> <span class="token keyword-block">else</span> <span class="token punctuation">{</span>
        <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span> url<span class="token punctuation">:</span> <span class="token string">'login.html'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span></pre></code>
          <h2>Route Events</h2>
          <p>It is possible to add all page events inside of route for this page using <code>on</code> route property. For example:</p><pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  routes<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token comment">// ...</span>
    <span class="token punctuation">{</span>
      path<span class="token punctuation">:</span> <span class="token string">'/users/'</span><span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token string">'./pages/users.html'</span><span class="token punctuation">,</span>
      on<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">pageBeforeIn</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> page</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token comment">// do something before page gets into the view</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">pageAfterIn</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> page</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token comment">// do something after page gets into the view</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">pageInit</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> page</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token comment">// do something when page initialized</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">pageBeforeRemove</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> page</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token comment">// do something before page gets removed from DOM</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <div class="important-note">
            <p>Please note, that such route events are actually DOM events, so each such handler will accept <code>event</code> as a first argument with the event itself and <code>page</code> as the second argument with <a href="page.html#page-data">page data</a>.</p>
            <p>Also, context of such event handler (<code>this</code>) will point to related <a href="view.html#router-api-methods-properties">Router instance</a>.</p>
          </div>
          <h2>Nested Routes</h2>
          <p>It is possible to have nested routes (routes in routes) as well:</p><pre><code class="js">routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/faq/'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'./pages/faq.html'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/catalog/'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'./pages/catalog.html'</span><span class="token punctuation">,</span>
    routes<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        path<span class="token punctuation">:</span> <span class="token string">'computers/'</span><span class="token punctuation">,</span>
        url<span class="token punctuation">:</span> <span class="token string">'./pages/computers.html'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        path<span class="token punctuation">:</span> <span class="token string">'monitors/'</span><span class="token punctuation">,</span>
        url<span class="token punctuation">:</span> <span class="token string">'./pages/monitors.html'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token operator">...</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span></pre></code>
          <p>What does it mean? To get better understanding, actually (under the hood) such routes will be merged into the following ones:</p><pre><code class="js">routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/faq/'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'./pages/faq.html'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/catalog/'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'./pages/catalog.html'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/catalog/computers/'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'./pages/computers.html'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/catalog/monitors/'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'./pages/monitors.html'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span></pre></code>
          <p>So lets say we are on a <code>/catalog/</code> page and have the following links:</p>
          <ol>
            <li>
              <p><code>&lt;a href="computers/"&gt;Computers</a></code> - will work as expected. Link will be merged with the current route (<code>/catalog/</code> + <code>computers/</code>) and we will have <code>/catalog/computers/</code> which we have in our routes.</p>
            </li>
            <li>
              <p><code>&lt;a href="./computers/"&gt;Computers&lt;/a&gt;</code> - will work the same as case 1 because <code>./</code> in the beginning of path means same sub level.</p>
            </li>
            <li>
              <p><code>&lt;a href="/catalog/computers/"&gt;Computers&lt;/a&gt;</code> - will also work as expected the same as case 1 because <code>/</code> (slash) in the beginning means root. And we have such root route in merged routes.</p>
            </li>
            <li>
              <p><code>&lt;a href="/computers/"&gt;Computers&lt;/a&gt;</code> - <b>won't work</b> as expected because <code>/</code> (slash) in the beginning means root. And we don't have such <code>/computers/</code> root route in our routes.</p>
            </li>
          </ol>
          <h2>Routable Tabs</h2>
          <p>What routable tabs means and why is it good?</p>
          <ul>
            <li>First of all, it provides opportunity to navigate to tabs by usual links instead of so called special tab-links.</li>
            <li>Second, when navigating to such route you can load a page with required tab opened.</li>
            <li>Third, with enabled Push State, the same tab will be opened when you navigate back and forward in history.</li>
            <li>And the last but not least, when using routable tabs you can load tabs content in the same ways as for pages, i.e. using <code>url</code>, <code>content</code>, <code>template</code>, <code>templateUrl</code>, <code>component</code> or <code>componentUrl</code></li>
          </ul>
          <p>First of all we need to specify tabs routes in app routes. Lets assume we have a page with routable tabs on /tabs/ route:</p><pre><code class="js">routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/about-me/'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'./pages/about-me/index.html'</span><span class="token punctuation">,</span>
    <span class="token comment">// Pass "tabs" property to route</span>
    tabs<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token comment">// First (default) tab has the same url as the page itself</span>
      <span class="token punctuation">{</span>
        path<span class="token punctuation">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
        id<span class="token punctuation">:</span> <span class="token string">'about'</span><span class="token punctuation">,</span>
        <span class="token comment">// Fill this tab content from content string</span>
        content<span class="token punctuation">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
          &lt;div class="block">
            &lt;h3>About Me&lt;/h3>
            &lt;p>...&lt;/p>
          &lt;/div>
        </span><span class="token template-punctuation string">`</span></span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token comment">// Second tab</span>
      <span class="token punctuation">{</span>
        path<span class="token punctuation">:</span> <span class="token string">'/contacts/'</span><span class="token punctuation">,</span>
        id<span class="token punctuation">:</span> <span class="token string">'contacts'</span><span class="token punctuation">,</span>
        <span class="token comment">// Fill this tab content via Ajax request</span>
        url<span class="token punctuation">:</span> <span class="token string">'./pages/about-me/contacts.html'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token comment">// Third tab</span>
      <span class="token punctuation">{</span>
        path<span class="token punctuation">:</span> <span class="token string">'/cv/'</span><span class="token punctuation">,</span>
        id<span class="token punctuation">:</span> <span class="token string">'cv'</span><span class="token punctuation">,</span>
        <span class="token comment">// Load this tab content as a component via Ajax request</span>
        componentUrl<span class="token punctuation">:</span> <span class="token string">'./pages/about-me/cv.html'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span></pre></code>
          <p>On the <code>/about-me/</code> page we may have the following structure for example:</p><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>navbar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>navbar-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About Me<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>toolbar tabbar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>toolbar-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>./<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tab-link<span class="token punctuation">"</span></span> <span class="token attr-name">data-route-tab-id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>about<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>./contacts/<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tab-link<span class="token punctuation">"</span></span> <span class="token attr-name">data-route-tab-id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>contacts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>>Contacts<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>./cv/<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tab-link<span class="token punctuation">"</span></span> <span class="token attr-name">data-route-tab-id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>cv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>>CV<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tabs tabs-routable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tab page-content<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>about<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tab page-content<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>contacts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tab page-content<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>cv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></code>
          <p>Almost the same as with usual <a href="tabs.html">Tabs</a> but with the difference that there is no more <code>tab-link-active</code> and <code>tab-active</code> classes on tab links and tabs. These classes and tabs will be switched by router. And there is a new <code>data-route-tab-id</code> attribute, it is required for tabs switcher to understand which link related to the selected route.</p>
          <p>You can learn more about Routable Tabs and their additional events in appropriate sections of <a href="tabs.html#routable-tabs">Tabs</a> component page.</p>
          <h2>Routable Modals</h2>
          <p>Modals can routable as well. By Modals here we mean the following components: <a href="popup.html">Popup</a>, <a href="popover.html">Popover</a>, <a href="action-sheet.html">Actions Sheet</a>, <a href="login-screen.html">Login Screen</a>, <a href="sheet.html">Sheet</a>. Probably Popup and Login Screen have more use cases here.</p>
          <p>And same features as for routable tabs and pages:</p>
          <ul>
            <li>it provides opportunity to open modals by usual links instead of so called special links or API,</li>
            <li>with enabled Push State, the same modal will be opened when you refresh browser, navigate back and forward in history,</li>
            <li>with routable modals you can load modal itself and its content in the same ways as for pages, i.e. using <code>url</code>, <code>content</code>, <code>template</code>, <code>templateUrl</code>, <code>component</code> or <code>componentUrl</code></li>
          </ul><pre><code class="js">routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token operator">...</span>
  <span class="token comment">// Creates popup from passed HTML string</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/popup-content/'</span><span class="token punctuation">,</span>
    popup<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      content<span class="token punctuation">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
        &lt;div class="popup">
          &lt;div class="view">
            &lt;div class="page">
              ...
            &lt;/div>
          &lt;/div>
        &lt;/div>
      </span><span class="token template-punctuation string">`</span></span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// Load Login Screen from file via Ajax</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/login-screen-ajax/'</span><span class="token punctuation">,</span>
    loginScreen<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      url<span class="token punctuation">:</span> <span class="token string">'./login-screen.html'</span><span class="token punctuation">,</span>
      <span class="token comment">/* login-screen.html contains:
        &lt;div class="login-screen">
          &lt;div class="view">
            &lt;div class="page">
              ...
            &lt;/div>
          &lt;/div>
        &lt;/div>
      */</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// Load Popup from component file</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/popup-component/'</span><span class="token punctuation">,</span>
    loginScreen<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      componentUrl<span class="token punctuation">:</span> <span class="token string">'./popup-component.html'</span><span class="token punctuation">,</span>
      <span class="token comment">/* popup-component.html contains:
        &lt;template>
          &lt;div class="popup-screen">
            &lt;div class="view">
              &lt;div class="page">
                ...
              &lt;/div>
            &lt;/div>
          &lt;/div>
        &lt;/template>
        &lt;style>...&lt;/style>
        &lt;script>...&lt;/script>
      */</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// Use async route to check if the user is logged in:</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/secured-page/'</span><span class="token punctuation">,</span>
    <span class="token function">async</span><span class="token punctuation">(</span>routeTo<span class="token punctuation">,</span> routeFrom<span class="token punctuation">,</span> resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword-block">if</span> <span class="token punctuation">(</span>userIsLoggedIn<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          url<span class="token punctuation">:</span> <span class="token string">'secured-page.html'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword-block">else</span> <span class="token punctuation">{</span>
        <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          loginScreen<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            url<span class="token punctuation">:</span> <span class="token string">'login-screen.html'</span>
          <span class="token punctuation">}</span> <span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span></pre></code>
          <p>According to example above:</p>
          <ul>
            <li>when you click on link with <code>/popup-content/</code> href attribute it will open Popup from specified string content,</li>
            <li>when you click on link with <code>/login-screen-ajax/</code> href attribute it will perform Ajax request to <code>login-screen.html</code> file and open it as a Login Screen,</li>
            <li>when you click on link with <code>/popup-component/</code> href attribute it will perform Ajax request to <code>popup-component.html</code> file, parse it as a Router Component and open it as a Popup,</li>
            <li>when you click on link with <code>/secured-content/</code> href attribute it will load page from <code>secured-page.html</code> if user is logged in or open Login Screen from <code>login-screen.html</code> file is user is not logged in.</li>
          </ul>
          <h2>Routable Panels</h2>
          <div class="important-note">
            <p><b>Routable Panels available from Framework7 version 3.2.0.</b></p>
          </div>
          <p>Panels (Side Panels) can also be routable with same features as for routable modals and pages:</p>
          <ul>
            <li>it provides opportunity to open Panel by usual links instead of so called special links or API,</li>
            <li>with enabled Push State, the same Panel will be opened when you refresh browser, navigate back and forward in history,</li>
            <li>with routable Panels you can load Panel itself and its content in the same ways as for pages and modals, i.e. using <code>url</code>, <code>content</code>, <code>template</code>, <code>templateUrl</code>, <code>component</code> or <code>componentUrl</code></li>
          </ul><pre><code class="js">routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token operator">...</span>
  <span class="token comment">// Creates Panel from passed HTML string</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/left-panel/'</span><span class="token punctuation">,</span>
    panel<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      content<span class="token punctuation">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
        &lt;div class="panel panel-left panel-cover">
          &lt;div class="view">
            &lt;div class="page">
              ...
            &lt;/div>
          &lt;/div>
        &lt;/div>
      </span><span class="token template-punctuation string">`</span></span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// Load Panel from file via Ajax</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/right-panel-ajax/'</span><span class="token punctuation">,</span>
    panel<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      url<span class="token punctuation">:</span> <span class="token string">'./right-panel.html'</span><span class="token punctuation">,</span>
      <span class="token comment">/* right-panel.html contains:
      &lt;div class="panel panel-right panel-reveal">
        &lt;div class="view">
          &lt;div class="page">
            ...
          &lt;/div>
        &lt;/div>
      &lt;/div>
      */</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// Load Panel from component file</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/panel-component/'</span><span class="token punctuation">,</span>
    panel<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      componentUrl<span class="token punctuation">:</span> <span class="token string">'./panel-component.html'</span><span class="token punctuation">,</span>
      <span class="token comment">/* panel-component.html contains:
      &lt;template>
        &lt;div class="panel panel-left panel-cover">
          &lt;div class="view">
            &lt;div class="page">
              ...
            &lt;/div>
          &lt;/div>
        &lt;/div>
      &lt;/template>
      &lt;style>...&lt;/style>
      &lt;script>...&lt;/script>
      */</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span></pre></code>
          <p>According to example above:</p>
          <ul>
            <li>when you click on link with <code>/left-panel/</code> href attribute it will open Panel from specified string content,</li>
            <li>when you click on link with <code>/right-panel-ajax/</code> href attribute it will perform Ajax request to <code>right-panel.html</code> file and open it as a Right Panel,</li>
            <li>when you click on link with <code>/panel-component/</code> href attribute it will perform Ajax request to <code>panel-component.html</code> file, parse it as a Router Component and open it as a Panel,</li>
          </ul>
          <div class="important-note">
            <p>Note that <b>routable Panels can't be mixed with static Panels</b>. So if you have static left panel in the app, then only right panel can be loaded as routable panel.</p>
          </div>
          <h2>Route Before Enter/Leave</h2>
          <p><code>beforeEnter</code> and <code>beforeLeave</code> route hooks can be very useful if you need to do additional checks, execute additional actions or load/send something before route load (enter) and unload (leave). It can be single method or array of methods to be executed. For example:</p><pre><code class="js">routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'profile'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'profile.html'</span><span class="token punctuation">,</span>
    <span class="token function-variable function">beforeEnter</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">routeTo<span class="token punctuation">,</span> routeFrom<span class="token punctuation">,</span> resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword-block">if</span> <span class="token punctuation">(</span><span class="token comment">/* some condition to check user is logged in */</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword-block">else</span> <span class="token punctuation">{</span>
        <span class="token comment">// don't allow to visit this page for unauthenticated users</span>
        <span class="token function">reject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'profile-edit'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'profile.html'</span><span class="token punctuation">,</span>
    <span class="token function-variable function">beforeLeave</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">routeTo<span class="token punctuation">,</span> routeFrom<span class="token punctuation">,</span> resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword-block">if</span> <span class="token punctuation">(</span><span class="token comment">/* user didn't save edited form */</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">confirm</span><span class="token punctuation">(</span>
          <span class="token string">'Are you sure you want to leave this page without saving data?'</span><span class="token punctuation">,</span>
          <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// proceed navigation</span>
            <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// stay on page</span>
            <span class="token function">reject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">)</span>
      <span class="token punctuation">}</span> <span class="token keyword-block">else</span> <span class="token punctuation">{</span>
        <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span></pre></code>
          <p>And of course there are multiple hooks are supported when passed as array of functions:</p><pre><code class="js"><span class="token keyword">function</span> <span class="token function">checkAuth</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword-block">from</span><span class="token punctuation">,</span> resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword-block">if</span> <span class="token punctuation">(</span><span class="token comment">/* some condition to check user is logged in */</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword-block">else</span> <span class="token punctuation">{</span>
    <span class="token function">reject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">checkPermission</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword-block">from</span><span class="token punctuation">,</span> resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword-block">if</span> <span class="token punctuation">(</span><span class="token comment">/* some condition to check user edit permission */</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword-block">else</span> <span class="token punctuation">{</span>
    <span class="token function">reject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/profile/'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'profile.html'</span><span class="token punctuation">,</span>
    <span class="token comment">// check if the user is logged in</span>
    beforeEnter<span class="token punctuation">:</span> checkAuth<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/profile-edit/'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'profile-edit.html'</span><span class="token punctuation">,</span>
    <span class="token comment">// check if the user is logged in and has required permission</span>
    beforeEnter<span class="token punctuation">:</span> <span class="token punctuation">[</span>checkAuth<span class="token punctuation">,</span> checkPermission<span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span>

</pre></code>
          <h2>Redirect & Alias</h2>
          <h4>Alias</h4>
          <p>We can pass route alias using route <code>alias</code> property. Alias in this case basically means that same route can have multiple <b>paths</b> to access:</p><pre><code class="js">routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/foo/'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'somepage.html'</span><span class="token punctuation">,</span>
    alias<span class="token punctuation">:</span> <span class="token string">'/bar/'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/foo2/'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'anotherpage.html'</span><span class="token punctuation">,</span>
    alias<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'/bar2/'</span><span class="token punctuation">,</span> <span class="token string">'/baz/'</span><span class="token punctuation">,</span> <span class="token string">'/baz2/'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span></pre></code>
          <p>According to the example above:</p>
          <ul>
            <li>if we request page by <code>/foo/</code> or <code>/bar/</code> URL then first route will match and we get the page loaded from <code>somepage.html</code></li>
            <li>if we request page by <code>/foo2/</code> , <code>/bar2/</code>, <code>/baz/</code>, <code>/baz2/</code> URL then second route will match and we the page loaded from <code>anotherpage.html</code></li>
          </ul>
          <h4>Redirect</h4>
          <p>We can pass route redirect using <code>redirect</code> property:</p>
          <ul>
            <li>if we pass <code>redirect</code> as a <code>string</code>, we must pass here direct redirect url</li>
            <li>if we pass <code>redirect</code> as a <code>function</code>, we need to call function's resolve parameter with redirect url</li>
          </ul>
          <p>For example:</p><pre><code class="js">routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/foo/'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'somepage.html'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/bar/'</span><span class="token punctuation">,</span>
    redirect<span class="token punctuation">:</span> <span class="token string">'/foo/'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/baz/'</span><span class="token punctuation">,</span>
    <span class="token function-variable function">redirect</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">route<span class="token punctuation">,</span> resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// if we have "user" query parameter</span>
      <span class="token keyword-block">if</span> <span class="token punctuation">(</span>route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>user<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// redirect to such url</span>
        <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'/foo/?user='</span> <span class="token operator">+</span> route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>user<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token comment">// otherwise do nothing</span>
      <span class="token keyword-block">else</span> <span class="token function">reject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span></pre></code>
          <p>Above example means:</p>
          <ul>
            <li>when we request <code>/bar/</code> URL then router will redirect to <code>/foo/</code> URL and then search for route that match to this new URL. In this case it will match to the first route with path <code>/foo/</code> and load the page from <code>somepage.html</code></li>
            <li>when we request <code>/baz/?user=john</code> we will redirect to URL <code>/foo/?user=john</code> that will match to first route</li>
            <li>when we request <code>/baz/</code> (without query) nothing will happen</li>
          </ul>
          <div class="important-note">
            <p>Note in redirects we pass URL, not the route path like in alias</p>
          </div>
          <h2>Keep Alive</h2>
          <div class="important-note">
            <p><b>keepAlive routes available from Framework7 version 3.6.0.</b></p>
          </div>
          <p>When <code>keepAlive</code> enabled, then once router loads such page, the page and, if applicable, its component (Vue, React or Router component) will be never destroyed. Instead, it will be detached from DOM and reused again when required.</p>
          <p>It can be useful to enable for "heavy" pages which are not too often updated. For example, page with map, or with heavy canvas or other computation. With usual logic, all those heavy computations will happen each time this page is visited. But with keepAlive it will be done once, and with all next visits, router will reuse already rendered page DOM element.</p>
          <p>It also can be useful if you really need to preserve page state. With enabled keepAlive, the next time page will be loaded, all DOM modifications and form elements state will be preserved.</p>
          <p>But there are things to pay attention:</p>
          <ul>
            <li>It is not supported for <code>async</code> routes</li>
            <li>It is supported only for pages (not for panels and modals)</li>
            <li>If you have dynamic route path (like <code>/some-page/:foo/:bar</code>) or you rely on page route query (<code>?foo=bar</code>), then query and route params won't be changed after its initial load.</li>
            <li><code>page:beforeremove</code>,<code>pageBeforeRemove</code> page events will never be fired for such page</li>
            <li>If you use it as Vue component, then <code>beforeDestroy</code>,<code>destroyed</code> hooks will never be fired for such component. <code>created</code>, <code>mounted</code> hooks will fire only once.</li>
            <li>If you use it as React component, then <code>componentWillUnmount</code> method will never be fired for such component. <code>componentWillMount</code>, <code>componentDidMount</code> methods will fire only once.</li>
            <li>If you use it as F7's Router component, then <code>beforeDestroy</code>, <code>destroyed</code> hooks will never be fired for such component. <code>created</code>, <code>mounted</code> hooks will fire only once.</li>
          </ul>
          <p>To avoid pitfalls with component's and page lifecycle, it is recommend to rely on following page events:</p>
          <ul>
            <li>
              <p><code>page:mounted</code> - will be always called for keepAlive route page when its DOM element attached or reattached again.</p>
            </li>
            <li>
              <p><code>page:beforeunmount</code> - will be always called for keepAlive route page when its DOM element is going to be detached from DOM.</p>
            </li>
          </ul>
          <p>To make keepAlive route we just need to pass <code>keepAlive: true</code> to its parameters:</p><pre><code class="js"><span class="token keyword-block">import</span> SomPageComponent <span class="token keyword-block">from</span> <span class="token string">'./some-page.js'</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token comment">/* Usual route */</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'./pages/home.html'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/* Alive route. Will be loaded from file first time, and then will reuse rendered DOM element */</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/map/'</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">'./pages/map.html'</span><span class="token punctuation">,</span>
    keepAlive<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">/* Alive route. Will be created as component, and then will reuse rendered DOM element */</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/some-page/'</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> SomPageComponent<span class="token punctuation">,</span>
    keepAlive<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span></pre></code>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>